Vue Js SVG Download as Png | Download Svg Code:Vue js is a popular JavaScript framework used for building web applications. When it comes to downloading an SVG file as a PNG image or obtaining the SVG code, Vue js provides various approaches. One method involves utilizing the HTML5 Canvas element to convert the SVG to a PNG image using libraries like canvg or html2canvas. Another approach is to use the Blob object to generate a downloadable file from the SVG code. These methods require appropriate dependencies and coding logic to achieve the desired functionality within a Vue js application.
How can I download an SVG as a PNG and obtain the SVG code using Vue js?
This code snippet is a Vue.js application that displays an SVG icon and provides buttons to download the SVG code or a PNG image of the icon. The SVG code is stored in the svg property of the Vue app’s data.
Clicking the “Download SVG” button creates a Blob object from the SVG data, generates a URL for it, and triggers a download of the SVG file.
Clicking the “Download PNG” button first converts the SVG data to an image by loading it into an <img> element. After the image loads, it is drawn onto a canvas, which is then converted to a PNG blob. Finally, a download of the PNG file is initiated.
The downloaded files are named “image.svg” and “image.png”, respectively.
Vue Js SVG Download as Png | Download Svg Code
<div id="app">
<div class="svg-container">
<div class="svg-icon" v-html="svg"></div>
<button class="button svg-download" @click="downloadSvg">
Download SVG
</button>
<!-- Added SVG download button -->
<button class="button png-download" @click="downloadPng">
Download PNG
</button>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" fill="red" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> </svg>`,
};
},
methods: {
downloadSvg() {
const svgData = this.svg;
const svgBlob = new Blob([svgData], { type: "image/svg+xml" });
const svgUrl = URL.createObjectURL(svgBlob);
const downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "image.svg";
downloadLink.click();
URL.revokeObjectURL(svgUrl);
},
downloadPng() {
const svgData = this.svg;
const svgBlob = new Blob([svgData], { type: "image/svg+xml" });
const svgUrl = URL.createObjectURL(svgBlob);
const svgImage = new Image();
svgImage.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = svgImage.width;
canvas.height = svgImage.height;
const canvasCtx = canvas.getContext("2d");
canvasCtx.drawImage(svgImage, 0, 0);
canvas.toBlob((blob) => {
const pngUrl = URL.createObjectURL(blob);
const downloadLink = document.createElement("a");
downloadLink.href = pngUrl;
downloadLink.download = "image.png";
downloadLink.click();
URL.revokeObjectURL(pngUrl);
}, "image/png");
};
svgImage.src = svgUrl;
},
},
});
app.mount("#app");
</script>
Output of Vue Js SVG Download as Png | Download Svg Code
